<template>

    <div class="tmpl">
        <div id="cate">
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click='getImg()'>全部</li>
                <li v-for="item in cates" @click='getImg(item.id)'>{{item.title}}</li>
            </ul>
        </div>

        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/info/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div class="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>

    </div>


</template>

<script>
    import common from '../../kits/common.js';
    import {
        Toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                ulWidth: 320,
                cates: [],
                list: []
            }
        },
        created() {
            this.getTit();
            this.getImg();
        },
        methods: {
            getTit() {
                var url = common.apidomain + '/api/getimgcategory';
                this.$http.get(url).then((res) => {
                    if (res.body.status != 0) {
                        Toast(res.body.message);
                        return;
                    }
                    this.cates = res.body.message;
                    this.ulWidth = (this.cates.length + 1) * 62;
                })
            },
            getImg(cateId){
                cateId = cateId || 0;
                var url = common.apidomain+'/api/getimages/'+cateId;
                this.$http.get(url).then((res)=>{
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.list = res.body.message;
                })
            }
        }
    }
</script>

<style scoped>
    #cate {
        width: 100%;
        /*max-width: 375px;*/
        overflow-x: auto;
    }

    #cate ul {
        margin: 0px;
        padding-left: 10px;
    }

    #cate li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 14px;
        padding-left: 6px;
    }

    #imglist {

    }
    #imglist li{
        position: relative;
    }
    #imglist img{
        width: 100%;
        height: 300px;
    }
    .desc{
        position: absolute;
        bottom: 2px;
        background-color: rgba(0, 0, 0, .2);
    }
    .desc h5{
        color: #fff;
        font-weight: bold;
    }
    .desc p{
        color: #fff;
    }
    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

</style>